<template>
	<view>
		<view class="uni-input-wrapper username-input-wrap">
		    <input class="uni-input username-input" placeholder="请输入要修改的昵称" :value="inputValue" @input="clearInput" focus />
		    <view class="uni-icon clear-icon-set" v-if="showClearIcon" @click="clearIcon">&#xe434;</view>
		</view>
		<view class="error-msg">{{errorMsg}}</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				username:'',//从我的信息页面传来的原始昵称
				showClearIcon: true,
				inputValue: '',//修改的昵称
				isRight:true,
				errorMsg:''
			}
		},
		methods: {
			clearInput: function(event) {
			    this.inputValue = event.target.value;
			    if (event.detail.value.length > 0) {
			        this.showClearIcon = true;
			    } else {
			        this.showClearIcon = false;
			    }
				//输入昵称验证
				if(event.detail.value.length < 2 || event.detail.value.length > 20){
					this.isRight = false;
					this.errorMsg = "请输入3-10位字母数字组成的昵称"
				}
					
			},
			clearIcon: function() {
			    this.inputValue = '';
			    this.showClearIcon = false;
			},
		},
		onLoad(res) {
			this.inputValue = res.username;
			console.log(JSON.stringify(res));
		},
		onNavigationBarButtonTap() {
			console.log("保存");
			if(this.inputValue === this.username){
				console.log("修改的昵称与原先昵称相同，直接修改成功");
				//用正则验证
			} else if(!this.isRight){
				console.log("不符合要求");
				this.errorMsg = "请输入3-10位字母数字组成的昵称";
			} else {
				console.log("提交到后台");
			}
		}
	}
</script>

<style>
.username-input-wrap {
	margin-top: 10px;
	padding: 10px 0 10px; 
	border-top: 1px solid #D7D7D7;
	border-bottom: 1px solid #D7D7D7;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.username-input {
	font-size: 18px;
}
.clear-icon-set {
	margin-right: 30px;
	display: block;
	font-size: 25px;
	color: #BFBFBF;
}
.error-msg {
	margin-top: 10px;
	padding-left: 10px;
	color: red;
	font-size: 14px;
}

</style>
